<template>
  <div class="h-full w-full flex flex-col justify-between">
    <div class="grow-[1] h-0 mx-[15px] mt-[15px]">
      <el-table
        scrollbar-always-on
        ref="elTableRef"
        v-loading="state.loading"
        :data="list"
        height="100%"
        border
        stripe
        fit
      >
        <template #empty>
          <ui-empty />
        </template>
        <el-table-column align="center" prop="UserName" label="用户名" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.UserName || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Country" label="国家/地区" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Country || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Ip" label="IP" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Ip || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="UserAgent" label="浏览器UA" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.UserAgent || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="CreatedAt" label="时间" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            <span>{{ formatDate(row.CreatedAt) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-between my-[10px] mx-[15px]">
      <div class="flex-1 w-0 mr-[20px] flex justify-start">
        <div>
          <el-alert
            title="注意：登录日志最多保留两月数据。"
            type="warning"
            show-icon
            :closable="false"
          />
        </div>
      </div>
      <ui-pagination
        :total="state.total"
        v-model:pageSize="state.pageSize"
        v-model:currentPage="state.page"
        @current-change="getData"
      ></ui-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reqUserLoginLog } from "@/api/report";
import { useList } from "@/hooks/useList";
import { formatDate } from "~/utils/common";

interface TableItem {
  row: LoginLogMo;
}

const { elTableRef, state, list, getData } = useList<LoginLogMo>(reqUserLoginLog);

onMounted(() => {
  getData();
});
</script>
